
<template>
	<view class="searchContainer" >
		<view class="searchTop">
			<view class="searchTopFixed">
				<!-- <a href="javascript://" @click="goBack" class="returnBack"><i class="iconfont icon-ionf-xia" style="transform: rotate(180deg);"></i></a> -->
				<view class="searchInput" @click="showSearchLay">
					<view class="search-box">
						<i class="iconfont icon-sousuo"></i>
						<input type="text" v-model="searchMsgs.search_name" readonly placeholder="请输入商品名称" disabled />						
					</view>
				</view>				
			</view>
		</view>
		<!-- 筛选 -->
		<view class="search-filter" >
			<ul class="search-filter-list">
				<li class="search-filter-item " :class="{'active':searchParamer.name == 'order'}" @click="searchSort('order')">综合</li>
				<li class="search-filter-item" :class="[{'active':searchParamer.name == 'sort'},{'more-sort':searchParamer.name == 'sort' && searchParamer.value=='desc'},{'more-sort2':searchParamer.name == 'sort' && searchParamer.value=='asc'}]"
				 @click="searchSort('sort')">销量</li>
				<li class="search-filter-item" :class="[{'active':searchParamer.name == 'price'},{'more-sort':searchParamer.name == 'price' && searchParamer.value=='max_price'},{'more-sort2':searchParamer.name == 'price' && searchParamer.value=='min_price'}]"
				 @click="searchSort('price')">价格</li>
			</ul>
		</view>
		<!-- 筛选 -->

		<!-- 搜索内容 -->
		<view class="searchContent" >
			<ul class="searchContentList" >
				<my-null v-if="searchRusultData.length == 0"></my-null>
				<li class="searchContentItem" v-for="(item,index) in searchRusultData" :key="index">
					<view class="searchContentItemC">
						<view class="prodPic" @click="navTo(item.goods_id)">
							<image :src="item.pic_cover_small" alt mode="aspectFill" lazy-load @load="onImageLoad('searchRusultData', index)"
							 @error="onImageError('searchRusultData', index)"></image>
						</view>
						<view class="prodInfo">
							<p class="prodTitle">{{item.goods_name}}</p>
							
						</view>
						<p class="prodPrice">
							<view class="">								
								<text>￥{{item.promotion_price}}</text>
							</view>							
						</p>
					</view>
				</li>
			</ul>
			<uni-load-more :status="loadingType" v-if="searchRusultData.length>0"></uni-load-more>
		</view>		
	</view>
</template>

<script>
	import myNull from "../home/component/myNull.vue";
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import {mapState,mapGetters,mapActions} from "vuex";		
	export default {
		components: {									
			uniLoadMore,			
			myNull
		},
		data() {
			return {
				loadingType: 'more',
				ShowStatus: false,
				cartLength: '',				
				category_id: "",
				searchParamer: {
					name: '',
					value: ''
				},
				skuType: "cart",
				productInfo: {

				},
				beforeRoute: "",
				Status: false,
				searchRusultData: [
					
				],
				searchParamsPageSize: 10,
				searchParamsPage:0,
				keyWord: "",
				goods_id: null,
				searchMsgs:null
			};
		},

		watch: {
			
		},
		computed: {			
			...mapState(['hasLogin'])
		},		
		onPullDownRefresh() {
			this.ajaxSearchGoods('refresh');
		},
		onReachBottom() {
			this.ajaxSearchGoods('add', 1);
			
		},		
		onLoad(options) {
			this.searchMsgs = JSON.parse(options.searchMsgs);
			this.category_id = 9;
			this.initSearch();
		},
		methods: {
			//监听image加载完成
			onImageLoad(key, index) {				
				this.$set(this[key][index], 'loaded', 'loaded');				
			},
			//监听image加载失败
			onImageError(key, index) {				
				this[key][index].pic_cover_small = '/static/temp/error.jpg';
			},
			//初始化数据
			async initSearch() {
				this.searchParamer.name = 'order';
				this.searchParamer.value = '';
				this.searchParamsPage = 0;
				this.ajaxSearchGoods('add', 1);				
			},
			navTo(goods_id) {
				uni.navigateTo({
					url: '/pages/detail/detail?goods_id=' + goods_id
				})
			},
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			// 显示搜索层
			showSearchLay(flag) {		
				uni.navigateTo({
					url: '/pages/market/searchPopup?goods_type=1'
				})
			},
			// 购物车点击事件
			addBuyCart(goods_id) {
				this.productInfo.goods_id = goods_id;
				this.goods_id = goods_id;
				console.log(this.productInfo);
				this.$store.dispatch("updataSkuStatus", true);
			},

			// 点击查询排序状态 
			searchSort(type) {				
				let reset = false;
				switch (type) {
					case 'order':
						this.searchParamer.name == type ? reset = true : 'order';
						this.searchParamer.value = ''
						break;
					case 'sort':
						this.searchParamer.value == 'asc' && this.searchParamer.name == 'sort' ? reset = true : '';

						if (!reset && this.searchParamer.name != 'sort') {
							// 第一次进入sort
							this.searchParamer.value = 'desc'
						} else {
							this.searchParamer.value = 'asc'
						}

						break;
					case 'price':

						this.searchParamer.value == 'min_price' && this.searchParamer.name == 'price' ? reset = true : '';
						if (!reset && this.searchParamer.name != 'price') {
							// 第一次进入sort
							this.searchParamer.value = 'max_price'
						} else {
							this.searchParamer.value = 'min_price'
						}

						break;
				}
				this.searchParamer.name = reset ? '' : type;
				if(this.searchParamer.name==''){
					this.searchParamer.name='order';
				}
				this.searchParamsPage = 1;
				this.ajaxSearchGoods('refresh', 1);
				uni.showLoading({
					title: '正在加载'
				})
			},
			// 状态
			async ajaxSearchGoods(type, loading) {
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return;
					}
					this.loadingType = 'loading';
					this.searchParamsPage = this.searchParamsPage + 1;
				} else {
					this.loadingType = 'more';

				}
				if (type === 'refresh') {
					this.searchRusultData = [];
				}
				let paramer = {
					// category_id:this.category_id,
					search_name: this.searchMsgs.search_name,
					page: this.searchParamsPage,
					limit: '10'					
				}

				if (this.searchParamer.name == 'order') {
					paramer.order_type = '1';
				} else if (this.searchParamer.name == 'price') {
					paramer.order_type = '3';
					if (this.searchParamer.value == 'max_price') {						
						paramer.sort = 'desc';
					} else {						
						paramer.sort = 'asc';
					}
				} else if (this.searchParamer.name == 'sort') {
					paramer.order_type = '2';
					if (this.searchParamer.value == 'desc') {
						paramer.sort = 'desc';
					} else {
						paramer.sort = 'asc';
					}
				}	
				uni.request({
					url: this.$base_url + '/goods/goodsSearch', //仅为示例，并非真实接口地址。
					data: paramer,
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					method: "POST",
					success: (result) => {
						if (result.data.code == 10000) {
							let searchRusultData = result.data.data.data;
							let count = result.data.data.total_count;														
							this.searchRusultData = this.searchRusultData.concat(searchRusultData);							
							this.loadingType = this.searchRusultData.length >= count ? 'nomore' : 'more';
							if (type === 'refresh') {
								if (loading == 1) {
									uni.hideLoading();
								} else {
									uni.stopPullDownRefresh();
								}
							}
						} else {							
							this.$api.msg(result.data.message);
							uni.hideLoading();							
						}
					},
					fali: (res) => {
						console.log(res.data);
					}

				});


			}

		}
	};
</script>
<style lang="scss" scoped>
	@import "../category/list.scss";
</style>
